<template>
  <a-modal v-model:visible="visible" title="小组活动组员招募表" @ok="onSubmit" width="1200px">
    <div class="member-recruit">
      <a-form-model layout="horizontal" ref="ruleForm" :model="form" :labelCol="{span: 4}" :wrapperCol="{span: 12}">
        <a-form-model-item label="小组活动名称">
          <a-input v-model="activityDetail.activityName" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="小组编号">
          <a-input v-model="activityDetail.activityCode" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="项目落地社区（村、学校）" prop="projectLocation"
          :rules="{ required: true, message: '请选择', trigger: ['change'] }">
          <a-select v-model="form.projectLocation">
            <a-select-option value="1">1</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="负责社工">
          <a-input v-model="activityDetail.workPlan" disabled></a-input>
        </a-form-model-item>
        <a-form-model-item label="参与志愿者">
          <a-input v-model="activityDetail.workPlan" disabled></a-input>
        </a-form-model-item>
        <a-row>
          <a-col :span="4">
            <div class="required">小组成员：</div>
          </a-col>
          <a-col :span="20">
            <a-tabs v-model="current">
              <a-tab-pane key="1" tab="从系统中选择">
                <a-table :columns="columns" :data-source="form.groupMembers">
                  <template slot="costTime" slot-scope="text, record, index">
                    <a-form-model-item :prop="`groupMembers.${index}.memberIdentity`"
                      :rules="{required: true,type: 'number', message: '请选择', trigger: ['change']}"
                      :wrapperCol="{span: 24}">
                      <a-select v-if="isEdit" v-model="groupMembers[index].memberIdentity">
                        <a-select-option :value="1">组员</a-select-option>
                        <a-select-option :value="2">志愿者</a-select-option>
                      </a-select>
                      <template v-else>
                        {{ text === 1 ? '组员' : '志愿者' }}
                      </template>
                    </a-form-model-item>
                  </template>
                  <template slot="control" slot-scope="text, record, index">
                    <div style="margin-bottom: 24px;">
                      <a type="link" v-if="record.edit" @click="record.edit = false">保存</a>
                      <a type="link" v-else @click="record.edit = true">编辑</a>
                      <a type="link" style="margin-left: 20px;"
                        @click="onFlowRemove(form.activities[item.index].flows, index)">删除</a>
                    </div>
                  </template>
                </a-table>
                <div class="system-add" @click="onSystemAdd">
                  <a-icon type="plus" />从系统中选择人员
                </div>
              </a-tab-pane>
              <a-tab-pane key="2" tab="手动录入" force-render>

                <a-table :columns="handlerColumns" :data-source="form.handlerMembers" :pagination="false">
                  <template slot="memberIdentity" slot-scope="text, record, index">
                    <a-form-model-item :prop="`handlerMembers.${index}.memberIdentity`"
                      :rules="{required: true, type: 'number', message: '请选择', trigger: ['change']}"
                      :wrapperCol="{span: 24}">
                      <a-select v-if="record.isEdit" v-model="form.handlerMembers[index].memberIdentity">
                        <a-select-option :value="1">组员</a-select-option>
                        <a-select-option :value="2">志愿者</a-select-option>
                      </a-select>
                      <template v-else>
                        {{ text === 1 ? '组员' : '志愿者' }}
                      </template>
                    </a-form-model-item>
                  </template>
                  <template slot="memberName" slot-scope="text, record, index">
                    <a-form-model-item :prop="`handlerMembers.${index}.memberName`"
                      :rules="{required: true, message: '请输入', trigger: ['change']}" :wrapperCol="{span: 24}">
                      <a-input v-if="record.isEdit" v-model="form.handlerMembers[index].memberName" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </a-form-model-item>
                  </template>
                  <template slot="memberGenre" slot-scope="text, record, index">
                    <a-form-model-item :prop="`handlerMembers.${index}.memberGenre`"
                      :rules="{required: true, message: '请输入', trigger: ['change']}" :wrapperCol="{span: 24}">
                      <a-select v-if="record.isEdit" v-model="form.handlerMembers[index].memberGenre">
                        <a-select-option :value="1">男</a-select-option>
                        <a-select-option :value="2">女</a-select-option>
                      </a-select>
                      <template v-else>
                        {{ text === 1 ? '男' : '女'}}
                      </template>
                    </a-form-model-item>
                  </template>
                  <template slot="memberBirth" slot-scope="text, record, index">
                    <a-form-model-item :prop="`handlerMembers.${index}.memberBirth`"
                      :rules="{required: true, message: '请输入', trigger: ['change']}" :wrapperCol="{span: 24}">
                      <a-date-picker value-format="YYYY-MM-DD" v-if="record.isEdit"
                        v-model="form.handlerMembers[index].memberBirth" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </a-form-model-item>
                  </template>
                  <template slot="memberAddr" slot-scope="text, record, index">
                    <a-form-model-item :prop="`handlerMembers.${index}.memberAddr`"
                      :rules="{required: true, message: '请输入', trigger: ['change']}" :wrapperCol="{span: 24}">
                      <a-input v-if="record.isEdit" v-model="form.handlerMembers[index].memberAddr" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </a-form-model-item>
                  </template>


                  <template slot="memberPhoneNumber" slot-scope="text, record, index">
                    <a-form-model-item :prop="`handlerMembers.${index}.memberPhoneNumber`" :rules="[{
            required: true,
            message: '请输入联系电话',
            trigger: ['trigger']
          }, {
            pattern: '^1(3|4|5|7|8)\\d{9}$',
            message: '手机号码格式不正确'
          }]" :wrapperCol="{span: 24}">
                      <a-input v-if="record.isEdit" v-model="form.handlerMembers[index].memberPhoneNumber" />
                      <template v-else>
                        {{ text }}
                      </template>
                    </a-form-model-item>
                  </template>
                  <template slot="control" slot-scope="text, record, index">
                    <div style="margin-bottom: 24px;">
                      <a type="link" v-if="record.isEdit" @click="record.isEdit = false">保存</a>
                      <a type="link" v-else @click="record.isEdit = true">编辑</a>
                      <a type="link" style="margin-left: 20px;"
                        @click="onFlowRemove(form.activities[item.index].flows, index)">删除</a>
                    </div>
                  </template>
                </a-table>

                <div class="system-add" @click="onHandlerAdd">
                  <a-icon type="plus" />添加
                </div>
              </a-tab-pane>
            </a-tabs>

          </a-col>
        </a-row>
      </a-form-model>

      <a-modal width="1000px" title="请选择小组成员" :visible="systemPeopleShow" @ok="handleOk" @cancel="handleCancel">
        <a-table :columns="peopleColumns" :data-source="peopleList" rowKey="id" rowSelection />
      </a-modal>
    </div>
  </a-modal>

</template>

<script>
  import {
    recruitDetail
  } from '@/api/sjsk/activity/group/detail/preparation/table2'
  import {
    administrotorsList
  } from '@/api/sjsk/activity/group/index.js'
  import {
    recruitSave
  } from '@/api/sjsk/activity/group/detail/member-recruit.js'
  export default {
    created() {

    },
    data() {
      return {
        visible: false,
        systemPeopleShow: false,
        peopleList: [],
        activityDetail: {
          activityName: '',
          activityCode: '',
          workPlan: '',
          workPlan: '',
        },
        current: '2',
        form: {
          "activityId": 0,
          "members": [],
          handlerMembers: [],
          "projectLocation": ""
        },
        peopleColumns: [{
            title: '姓名',
            dataIndex: 'personnelName',
          },
          {
            title: '性别',
            dataIndex: 'personnelSex',
          },
          {
            title: '电话',
            dataIndex: 'phone',
          },
          {
            title: '住址',
            dataIndex: 'residentialAddress',
          },

        ],
        columns: [{
            title: '身份',
            width: '18%',
            dataIndex: 'memberIdentity',
            scopedSlots: {
              customRender: 'memberIdentity'
            },
          },
          {
            title: '组员名称',
            width: '18%',
            dataIndex: 'memberName',
          },
          {
            title: '性别',
            width: '18%',
            dataIndex: 'sex',
          },
          {
            title: '年龄',
            width: '18%',
            dataIndex: 'age',
          },
          {
            title: '住址',
            width: '18%',
            dataIndex: 'memberAddr',
          },
          {
            title: '电话',
            width: '18%',
            dataIndex: 'memberPhoneNumber',
          },
          {
            title: '操作',
            width: 150,
            dataIndex: 'operation',
            scopedSlots: {
              customRender: 'operation'
            },
          },
        ],
        handlerColumns: [{
            title: '身份',
            width: '18%',
            dataIndex: 'memberIdentity',
            scopedSlots: {
              customRender: 'memberIdentity'
            },
          },
          {
            title: '组员名称',
            width: '18%',
            dataIndex: 'memberName',
            scopedSlots: {
              customRender: 'memberName'
            },
          },
          {
            title: '性别',
            width: '10%',
            dataIndex: 'memberGenre',
            scopedSlots: {
              customRender: 'memberGenre'
            },
          },
          {
            title: '生日',
            width: '18%',
            dataIndex: 'memberBirth',
            scopedSlots: {
              customRender: 'memberBirth'
            },
          },
          {
            title: '住址',
            width: '18%',
            dataIndex: 'memberAddr',
            scopedSlots: {
              customRender: 'memberAddr'
            },
          },
          {
            title: '电话',
            width: '18%',
            dataIndex: 'memberPhoneNumber',
            scopedSlots: {
              customRender: 'memberPhoneNumber'
            },
          },
          {
            title: '操作',
            width: 150,
            dataIndex: 'control',
            scopedSlots: {
              customRender: 'control'
            },
          },
        ],
      }
    },
    methods: {
      show(id) {
        this.visible = true
        this.form.activityId = id
        this.getDetail()
        this.getPeoPleList()
      },
      getPeoPleList(personnelName) {
        administrotorsList({
          personnelName
        }).then(res => {
          if (res.success) {
            console.log(res.result.records)
            this.peopleList = res.result.records
          }
        })
      },
      getDetail() {
        recruitDetail({
          activityId: this.form.activityId
        }).then(res => {
          const {
            success,
            result
          } = res
          if (success) {
            result.groupMembers.map(item => {
              item.isEdit = false
            })
            this.activityDetail = result.activityDetail
            this.form.members = result.groupMembers
            this.form.projectLocation = result.activityDetail.projectLocation

          }
        })
      },
      handleOk() {},
      handleCancel() {},
      onSystemAdd() {
        this.systemPeopleShow = true
      },
      onHandlerAdd() {
        this.form.handlerMembers.push({
          isEdit: true,
          "activityId": '',
          "memberAddr": "",
          "memberBirth": "",
          "memberGenre": 1,
          "memberIdentity": 1,
          "memberName": "",
          "memberPhoneNumber": "",
          "memberSource": 2,
          "personType": null,
          "sjskOrSocialUserId": null,
          "sysUserId": "",
        })
        this.form = JSON.parse(JSON.stringify(this.form))
      },
      onSubmit() {
        this.$refs.ruleForm.validate().then(res => {
          const form = JSON.parse(JSON.stringify(this.form))
          console.log(form)
          form.members = form.members.concat(form.handlerMembers)
          recruitSave(form).then(res => {
            this.$message.success('保存小组活动组员招募表成功')
            this.visible = false
          })
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .member-recruit {
    padding: 20px;
    background-color: #fff;

    .required {
      text-align: right;

      &::before {
        content: '*';
        color: red;
        margin-right: 5px;
      }

    }

    .title {
      font-size: 18px;
      font-weight: bold;
      padding-bottom: 20px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 20px;
    }

    .system-add {
      padding: 10px;
      border-bottom: 1px solid #ddd;
      text-align: center;
      cursor: pointer;

      &:active {
        background-color: rgba(#000, .1);
      }
    }
  }
</style>
